<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { ref, provide, onMounted, onBeforeMount, onUnmounted } from "vue";

import { invoke } from "@tauri-apps/api/tauri";
import { emit, listen } from "@tauri-apps/api/event";
import { event } from "@tauri-apps/api";

import * as echarts from 'echarts';
import 'echarts-liquidfill'

const cpu_usage_ref = ref(0);

const used_memory_ref = ref(0);
const total_memory_ref = ref(1);

const used_swap_ref = ref(0);
const total_swap_ref = ref(1);

const start_listener = async () => {
  return await listen("collet_cpu", event => {
    console.log(`event id ${event.id}`)
    const { cpu_usage, used_memory, free_memory, used_swap, free_swap } = event.payload;

    cpu_usage_ref.value = cpu_usage.toFixed(2);

    used_memory_ref.value = used_memory.toFixed(2);
    total_memory_ref.value = (used_memory + free_memory).toFixed(2);

    used_swap_ref.value = used_swap.toFixed(2);
    total_swap_ref.value = (used_swap + free_swap).toFixed(2);
  })
};

var unlisten = null;

onBeforeMount(() => {

})

onBeforeMount(() => {
  invoke("collet_cpu");
  unlisten = start_listener();
})

onUnmounted(async () => {
  if (unlisten != null) {
    await emit('StopEvent', { is_stop: true });
    unlisten.then((ok) => {
      ok();
      unlisten = null;
      console.log("stop success");
    }).catch((err) => {
      console.log("stop fail", err);
    });
  }
})

</script>

<template>
  <div class="custom-container" data-tauri-drag-region oncontextmenu="return false;" ondragstart="return false;"
    onselectstart="return false;" onselect="document.selection.empty();">
    <el-carousel height="60px" direction="vertical" :autoplay="true" indicator-position="none" data-tauri-drag-region>
      <el-carousel-item data-tauri-drag-region>
        <div data-tauri-drag-region>CPU</div>
        <div data-tauri-drag-region>{{ cpu_usage_ref }}%</div>
      </el-carousel-item>
      <el-carousel-item data-tauri-drag-region>
        <div data-tauri-drag-region>Mem</div>
        <div data-tauri-drag-region>{{ used_memory_ref }}/{{ total_memory_ref }}GB</div>
      </el-carousel-item>
      <el-carousel-item data-tauri-drag-region>
        <div>swap</div>
        <div>{{ used_swap_ref }}/{{ total_swap_ref }}GB</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  
}

.custom-container {
  align-items: center;
  background-color: rgba(255, 255, 255, 0);
}

.el-carousel__item div {
  color: #6ee40e;
  opacity: 0.75;
  line-height: auto;
  margin: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

/* .el-carousel__item:nth-child(2n) {
  background-color: #ffffff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
} */
</style>
